<template>
  <section>
    <a-tabs @change="handlerTabChange">
      <a-tab-pane :key="item" :tab="item" v-for="item in videoList" >
      </a-tab-pane>
    </a-tabs>
    <section class="video-container">
      <video v-if="currentVideo" :src="`${videoRootUrl}/${currentVideo}.mp4`" controls></video>
    </section>
  </section>
  <!-- <a-spin :spinning="loading" tip="文档加载中...请稍后！">
    <section class="document-detail">
        <a-empty v-if="!loading && !documentContent" />
        <pre v-else v-html="documentContent" class="document-content"></pre>
    </section>
  </a-spin> -->
</template>

<script lang="ts">
import { Mixins, Component, Watch, Vue, Prop } from 'vue-property-decorator'
import { permission } from '@/store/modules/permission'

@Component({
  components: {
  }
})
export default class AdminList extends Vue {
  @Prop({
    type: String
  })
  public currentId!: string

  public videoRootUrl: string = 'http://183.66.108.85:2021/'

  public currentVideo: string = ''

  public videoList = [
    '1.系统基础功能模块',
    '2.1用户及权限管理',
    '2.2行政区划维护',
    '3.1一般农户基础信息管理',
    '3.2一般农户家庭成员管理',
    '3.3一般农户补贴信息管理',
    '3.4一般农户耕地信息与种粮信息管理',
    '3.5一般农户补贴公示管理',
    '3.6一般农户银行兑付',
    '4.1种粮大户基础信息管理',
    '4.2大户耕地信息和种粮信息管理',
    '4.3大户审核和补贴状态的修改',
    '4.4大户补贴政策和公示管理',
    '4.5大户银行兑付信息管理'
  ]

  public documentContent: string = ''
  public loading = false

  public get isEditHelper() {
    return permission.isEditHelper
  }

  public mounted() {
    if (!this.currentVideo) {
      this.handlerTabChange(this.videoList[0])
    }
  }

  public handlerTabChange(value: string) {
    this.currentVideo = value
  }
  
}
</script>

<style scoped lang="less">
video {
  max-width: 100%;
  max-height: 100%;
}
.video-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  max-height: 80vh;
}
</style>
